AWS SDK for JavaScript in the Browserを使ってみる

#JavaScript

#AWS

中村修太

2013.11.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ブラウザ用AWS SDK

先日、AWS SDK for JavaScript in the BrowserのDeveloper previewがリリースされました。
すでにNode用SDKはリリースされていますが、これはブラウザからJavaScriptを使用して、
サーバサイド用コードを書かずにS3やDynamo等のサービスを利用できるようです。

このSDKは、下記のようにAmazonのJavaScriptライブラリを指定するだけで利用できます。
※2013/11/11現在

    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.0.0-rc1.min.js"></script>

なお、このライブラリはAmazonのWeb ID連携をサポートするらしいので、
クライアントサイドのコード内にAWSの認証情報を書くことなく使用できます。(一応書くこともできる）

簡単なサンプルを作成

では、AWS SDK for JavaScript in the Browserを試してみます。
今回は、S3の任意のバケットにあるオブジェクト一覧を表示してみましょう。
まずはS3でバケットを作成し、そこに適当なファイルをアップロードしておきます。
次に、バケットに対してProperties＞Permissions＞add CORS Configurationを選択します。
ここで設定を下記のように記述し、バケットに対して外部からの接続を許可しましょう。　
※とりあえず全部許可しているので注意

<CORSConfiguration>
    <CORSRule>
        <AllowedHeader>*</AllowedHeader>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

バケットの設定ができたら、あとはJavaScriptからアクセスするだけです。
認証はWeb ID連携が一般ですが、今回はとりあえず直接AWS.config.updateにキーを指定しています。
※非推奨

<!DOCTYPE html>
<html>
<head>
    <title>AWS SDK for JavaScript in the Browser</title>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.0.0-rc1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        //クライアントにキーが丸見えになるので非推奨
        AWS.config.update({accessKeyId: '＜アクセスキー＞', secretAccessKey: 'シークレットキー'});

        //バケット名
        var s3BucketName = '<バケット名>';
        //リージョン
        var s3RegionName = '<リージョン>';
        
        listObject();
        
        function listObject() {
            var s3 = new AWS.S3({params: {Bucket: s3BucketName, Region: s3RegionName}});
            s3.listObjects(function (err, data) {
                if (err) {
                    console.error(err);
                    throw err;
                }
                var keys = 'Your Bucket Object Keys:<br />';

                $.each(data.Contents, function (index, obj) {
                    var params = {Bucket: s3BucketName, Key: obj.Key};
                    keys += (index + ': ' + obj.Key + '<br />');
                });
                $("#keys").html(keys);
            });
        }
    </script>
</head>
<body>
<div id="keys"/>
</body>
</html>

AWS SDK for Node.jsを使用したことがある人にとってはわかりやすいと思います。
ブラウザで上記HTMLを開くと、指定したバケットのオブジェクトが表示されます。